<template>
	<view>
		<image class="bg" src="../../static/image/sucai.jpg"></image>
		<view class="loginIn-page">
			<image class="car" src="../../static/image/car.svg"></image>
			<view class="login">
				<view class="login-title">想去哪就去哪！</view>
				<view class="login-inp">
					<image src="../../static/image/user.svg"></image>
					<input placeholder-class="ps" placeholder="邮箱/手机号" />
				</view>
				<view class="login-inp">
					<image src="../../static/image/password.svg"></image>
					<input placeholder-class="ps" password placeholder="密码" />
				</view>
				<text class="login-forget" @click="toforgetPS1">忘记密码</text>
				<navigator open-type="switchTab" url="home"  class="login-btn">
					登录
				</navigator>
				<button class="login-register" @click="toregister">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "login-component",
		data() {
			return {	
			};
		},
	    methods:{
		    toregister(){
				uni.navigateTo({
					url:"register"
				})
			},
			toforgetPS1(){
				uni.navigateTo({
					url:"forgetPS1",
				})
			}
	    }
	}
</script>

<style>
	.car{
		width: 300rpx;
        height: 300rpx;
	}
	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.loginIn-page {
		/* 定位可以改变区域大小至全屏 */
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0);

		/* 弹性容器 */
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}
	.login {
		width: 95%;
		height: 70%;
		/* a就是透明度 0完全透明~1不透明 */
		background-color: rgba(255, 255, 200, 0);
		/* 设置圆角 */
		border-radius: 50rpx;
		/* 弹性容器 */
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
	}

	/* 标题 */
	.login-title {
		font-size: 60rpx;
		color: #FFCF4A;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	/* 输入框 */
	.login-inp {
		/* 字体默认大小40rpx + 20*2rpx + 4*2rpx = 88rpx */
		height: 4%;
		display: flex;
		border: 4rpx solid black;
		padding: 25rpx;
		/* 设置圆角 */
		border-radius: 150rpx;
		/* 设置长度 */
		width: 80%;
		margin-bottom: 70rpx;
		background-color: rgba(255, 255, 255, 0.95);
		align-items: center;
	}
	.login-inp image {
		width: 70rpx;
		height: 70rpx;
		flex: 1;
	}

	.login-inp input {
		flex: 5;
		font-size: 60rpx;
	}
	/* 忘记密码 */
	.login-forget {
		/* align-self 设置元素自身在弹性容器中的位置 */
		align-self: flex-end;
		margin-right: 60rpx;
		color: white;
		font-size:50rpx;
	}
    .login-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
		width: 60%;
		height: 10%;
		background-color: rgba(244, 206, 82, 0.95);
		color: white;
		border-radius: 100rpx;
		font-size: 80rpx;
	}
	.login-register{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
		width: 60%;
		height: 10%;
		background-color: rgba(244, 206, 82, 0.95);
		color: white;
		border-radius: 100rpx;
		font-size: 80rpx;
	}
</style>